<template>
    <div class="container flex-container">
        <n-card size="large" title="修改这个问题">
            <n-form ref="formRef" :model="question" :rules="rules" label-placement="left" size="large">
                <n-form-item label="标题" path="title">
                    <n-input v-model:value="question.title"/>
                </n-form-item>
                <n-form-item label="标签" path="tags">
                    <n-dynamic-tags v-model:value="question.tags" :disabled="true" :max="5" size="large"
                                    type="primary">
                        <template #input="{ submit, deactivate }">
                            <n-auto-complete
                                ref="autoCompleteInstRef"
                                v-model:value="autoCompleteValue"
                                :clear-after-select="true"
                                :get-show="isShowTagList"
                                :options="options"
                                placeholder="请输入"
                                size="small"
                                @blur="deactivate"
                                @select="submit($event)"
                                @keyup.enter="submit(autoCompleteValue)"
                            />
                        </template>
                        <template #trigger="{ activate, disabled }">
                            <n-button
                                :disabled="disabled"
                                dashed
                                type="primary"
                                @click="activate()"
                            >
                                <template #icon>
                                    <n-icon>
                                        <Plus/>
                                    </n-icon>
                                </template>
                                添加
                            </n-button>
                        </template>
                    </n-dynamic-tags>
                </n-form-item>
                <n-form-item label="描述" path="content">
                    <div id="vditor" v-highlight></div>
                </n-form-item>
            </n-form>
            <template #footer>
                <n-space justify="space-between">
                    <n-button size="large" type="primary" @click="handleEdit">修改</n-button>
                    <n-button size="large" @click="showDrawer = !showDrawer">
                        补充代码执行细节
                    </n-button>
                </n-space>
            </template>
        </n-card>
        <n-card v-show="showDrawer" size="large" style="width: 50%;" title="代码执行细节">
            <n-form ref="moreInfoFormRef" :model="question" :rules="rules" size="large">
                <n-form-item label="完整代码">
                    <n-input
                        v-model:value="question.completeCode"
                        :autosize="{ minRows: 3 }"
                        type="textarea"
                    />
                </n-form-item>
                <n-form-item label="执行结果">
                    <n-input v-model:value="question.executionResult" :autosize="{ minRows: 3 }"
                             type="textarea"/>
                </n-form-item>
                <n-form-item label="报错信息">
                    <n-input
                        v-model:value="question.errorMessage"
                        type="textarea"
                    />
                </n-form-item>
                <n-form-item label="你觉得出错的行">
                    <n-input
                        v-model:value="question.errorRow"
                        type="text"
                    />
                </n-form-item>
                <n-form-item label="你觉得出错的行">
                    <n-input
                        v-model:value="question.errorColumn"
                        type="text"
                    />
                </n-form-item>
                <n-form-item label="出错代码">
                    <n-input
                        v-model:value="question.errorCode"
                        :autosize="{ minRows: 3 }"
                        type="textarea"
                    />
                </n-form-item>
            </n-form>
        </n-card>
        <!--<div class="right">-->
        <!--    <n-card title="代码执行细节">-->
        <!--        <n-form ref="moreInfoFormRef" :model="question" :rules="rules" size="large">-->
        <!--            <n-form-item label="完整代码">-->
        <!--                <n-input-->
        <!--                    v-model:value="question.completeCode"-->
        <!--                    :autosize="{ minRows: 3 }"-->
        <!--                    type="textarea"-->
        <!--                />-->
        <!--            </n-form-item>-->
        <!--            <n-form-item label="执行结果">-->
        <!--                <n-input v-model:value="question.executionResult" :autosize="{ minRows: 3 }"-->
        <!--                         type="textarea"/>-->
        <!--            </n-form-item>-->
        <!--            <n-form-item label="报错信息">-->
        <!--                <n-input-->
        <!--                    v-model:value="question.errorMessage"-->
        <!--                    type="textarea"-->
        <!--                />-->
        <!--            </n-form-item>-->
        <!--            <n-form-item label="你觉得出错的行">-->
        <!--                <n-input-->
        <!--                    v-model:value="question.errorRow"-->
        <!--                    type="text"-->
        <!--                />-->
        <!--            </n-form-item>-->
        <!--            <n-form-item label="你觉得出错的行">-->
        <!--                <n-input-->
        <!--                    v-model:value="question.errorColumn"-->
        <!--                    type="text"-->
        <!--                />-->
        <!--            </n-form-item>-->
        <!--            <n-form-item label="出错代码">-->
        <!--                <n-input-->
        <!--                    v-model:value="question.errorCode"-->
        <!--                    :autosize="{ minRows: 3 }"-->
        <!--                    type="textarea"-->
        <!--                />-->
        <!--            </n-form-item>-->
        <!--        </n-form>-->
        <!--    </n-card>-->
        <!--    <n-drawer v-model:show="showDrawer" :width="500">-->
        <!--        <n-drawer-content closable title="代码执行细节">-->
        <!--            <n-form ref="moreInfoFormRef" :model="question" :rules="rules" size="large">-->
        <!--                <n-form-item label="完整代码">-->
        <!--                    <n-input-->
        <!--                        v-model:value="question.completeCode"-->
        <!--                        :autosize="{ minRows: 3 }"-->
        <!--                        type="textarea"-->
        <!--                    />-->
        <!--                </n-form-item>-->
        <!--                <n-form-item label="执行结果">-->
        <!--                    <n-input v-model:value="question.executionResult" :autosize="{ minRows: 3 }"-->
        <!--                             type="textarea"/>-->
        <!--                </n-form-item>-->
        <!--                <n-form-item label="报错信息">-->
        <!--                    <n-input-->
        <!--                        v-model:value="question.errorMessage"-->
        <!--                        type="textarea"-->
        <!--                    />-->
        <!--                </n-form-item>-->
        <!--                <n-form-item label="你觉得出错的行">-->
        <!--                    <n-input-->
        <!--                        v-model:value="question.errorRow"-->
        <!--                        type="text"-->
        <!--                    />-->
        <!--                </n-form-item>-->
        <!--                <n-form-item label="你觉得出错的行">-->
        <!--                    <n-input-->
        <!--                        v-model:value="question.errorColumn"-->
        <!--                        type="text"-->
        <!--                    />-->
        <!--                </n-form-item>-->
        <!--                <n-form-item label="出错代码">-->
        <!--                    <n-input-->
        <!--                        v-model:value="question.errorCode"-->
        <!--                        :autosize="{ minRows: 3 }"-->
        <!--                        type="textarea"-->
        <!--                    />-->
        <!--                </n-form-item>-->
        <!--            </n-form>-->
        <!--        </n-drawer-content>-->
        <!--    </n-drawer>-->
        <!--</div>-->
    </div>
</template>

<script setup>
import { nextTick, onMounted, ref, watch } from 'vue'
import { getQuestion, partialUpdateQuestion } from '../api/question'
import { NAutoComplete, useMessage } from 'naive-ui'
import { useRoute, useRouter } from 'vue-router'
import { Plus } from '@vicons/fa'
import { listTags } from '../api/tag'
import Vditor from 'vditor'
import 'vditor/dist/index.css'
import { fuzzyQuery } from '../utils/mini-lodash'

const showDrawer = ref(true)
window.$message = useMessage()
const message = useMessage()
const formRef = ref(null)
const $router = useRouter()
const question = ref({
    title: '',
    content: '',
    tags: [],
    executionResult: '',
    errorMessage: '',
    completeCode: '',
    errorCode: '',
    errorRow: '',
    errorColumn: '',
})
const options = ref([])
const autoCompleteInstRef = ref(null)
const autoCompleteValue = ref('')
const isShowTagList = (value) => {
    return !!fuzzyQuery(options.value, value).length
}
watch(autoCompleteInstRef, (value) => {
    if (value) {
        listTags().then(res => {
            options.value = []
            res.data.forEach(tag => {
                options.value.push(tag.name)
            })
        })
        nextTick(() => value.focus())
    }
})
const validateTags = () => {
    let result = [...new Set(question.value.tags)]
    return result.length === question.value.tags.length
}
const rules = {
    title: [
        {
            required: true,
            message: '请输入标题',
            trigger: 'blur',
        },
    ],
    tags: [
        {
            validator: validateTags,
            trigger: 'change',
            message: '标签不能重复！',
        },
    ],
}

const vditor = ref(null)
const handleEdit = () => {
    formRef.value?.validate(errors => {
        if (!errors) {
            question.value.content = vditor.value.getHTML()
            partialUpdateQuestion(route.params.id, question.value).then((res) => {
                    if (res.code === '200') {
                        message.success('修改成功')
                        question.value.tags = []
                        question.value.title = ''
                        question.value.content = ''
                        $router.push({
                            name: 'Detail',
                            params: { id: route.params.id },
                        })
                    }
                },
            )
        } else {
            message.error('内容校验失败')
        }

    })
}

const fillTagNames = (tagList) => {
    tagList.forEach((tag) => {
            const { name } = tag
            question.value.tags.push(name)
        },
    )
}

const route = useRoute()
onMounted(() => {
        getQuestion(route.params.id).then(res => {
            if (res.code === '200') {
                question.value.title = res.data.title
                question.value.content = res.data.content
                question.value.executionResult = res.data.executionResult
                question.value.errorMessage = res.data.errorMessage
                question.value.completeCode = res.data.completeCode
                question.value.errorCode = res.data.errorCode
                question.value.errorRow = res.data.errorRow
                question.value.errorColumn = res.data.errorColumn
                const md = vditor.value.html2md(question.value.content)
                vditor.value.setValue(md, true)
                fillTagNames(res.data.tags)
            } else {
                message.error('出问题啦！')
            }
        })
        vditor.value = new Vditor('vditor', {
            height: 500,
            width: '100%',
            icon: 'material',
            mode: 'wysiwyg',
            tab: '    ',
            placeholder: '内容描述',
            typewriterMode: true,
            undoDelay: 1500,
            hint: {
                emojiTail: '设置常用表情',
            },
            counter: {
                enable: true,
            },
            preview: {
                hljs: {
                    lineNumber: true,
                    style: 'native',
                },
            },
            toolbar: [
                'emoji', 'headings', 'bold', 'italic',
                'strike', 'link', 'ordered-list', 'check', '|',
                'quote', 'line', 'code', 'inline-code', 'fullscreen',
                'edit-mode', '|', 'undo', 'redo', 'code-theme',
                'content-theme', 'preview', 'help', 'outline',
            ],
        })
    },
)
</script>

<style scoped>
.flex-container {
    display: flex;
    gap: 1vw;
}

/*.left {*/
/*    width: 60%;*/
/*}*/

/*.right {*/
/*    width: 40%;*/
/*}*/
</style>
